iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

輕鬆Vue一下系列 第 29

Day29-v-charts/實作(1)

  • 分享至 

  • xImage
  •  

經過這幾十天來的介紹,現在就來利用vue&v-charts試做出一個簡單的網頁吧!
1.在網頁中建立兩個input物件分別綁定costprofit這兩個變數。
另外,還需要建立三個button物件,分別為新增更新刪除,如下:
https://ithelp.ithome.com.tw/upload/images/20191015/2011207633EzSi55ME.jpg
2.在圖表這邊,先利用data屬性綁定chartData變數,將資料生成圖表,如下:
https://ithelp.ithome.com.tw/upload/images/20191015/20112076qWbkZenc6s.jpg
https://ithelp.ithome.com.tw/upload/images/20191015/20112076DSsBY7LXMM.jpg
3.再透過events屬性綁定chartEvents變數,藉由chartEvents中的click方法,
使得input中的資料隨著在圖表中點擊不同而有所不同,如下:
https://ithelp.ithome.com.tw/upload/images/20191015/20112076FgSEzkwaAB.jpg
https://ithelp.ithome.com.tw/upload/images/20191015/20112076KfoK88uTdC.jpg
明日預告:v-charts/實作(2)&心得


上一篇
Day28-v-charts/事件監聽
下一篇
Day30-v-charts/實作(2)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言